<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>日志</title>
    <th:block th:replace="componet::reference"></th:block>
</head>
<body>



                    <div class="layui-card-body layui-table-body layui-table-main">

                        <form class="layui-form ">
                            <div class="layui-inline ">
                                <input class="layui-input" autocomplete="off" placeholder="开始日" name="start" id="start">
                            </div>
                            <div class="layui-inline ">
                                <input class="layui-input" autocomplete="off" placeholder="截止日" name="end" id="end"></div>
                            <div class="layui-inline ">
                                <button class="layui-btn" lay-submit="" lay-filter="search">
                                    <i class="layui-icon">&#xe615;</i></button>
                            </div>
                        </form>

                        <!--表格以及表格组件-->
                        <table class="layui-hide" id="test" lay-filter="test"></table>

                        <button class="layui-btn" onclick="exit()">返回</button>
                    </div>





<script th:inline="javascript" >

    function  exit() {
        var index = parent.layer.getFrameIndex(window.name);
        // 关闭当前frame
        parent.layer.close(index);
        xadmin.close();
    }


    layui.use(['laydate','form','table'],
    function () {
        $ = layui.jquery;

        var laydate = layui.laydate,
        table = layui.table,
        form = layui.form;

        //执行一个laydate实例
        laydate.render({
            elem: '#start' //指定元素
        });

        //执行一个laydate实例
        laydate.render({
            elem: '#end' //指定元素
        });

        //表单数据获取
        var getTable = table.render({
            elem: '#test'   //目标对象
            , url: '/log/logList'//数据接口
            , method : "post"
            , height : 350
            , parseData: function (res) { //将原始数据解析成 table 组件所规定的数据
                return {
                    "code": 200, //解析接口状态
                    "msg": res.message, //解析提示文本
                    "count": res.total, //解析数据长度
                    "data": res.records //解析数据列表
                };
            }
            ,limits : [5,10]
            ,request: {
                pageName: 'currentPage' //页码的参数名称，默认：page
                ,limitName: 'pageSize' //每页数据量的参数名，默认：limit
            }
            , where : {
                userCode : [[${userCode}]]
            }
            , page: true
            , title: '用户数据表' ///数据导出时的标题
            , text: {
                none: "暂无数据"
            }
            , cols: [
                [ //列数据
                    {title: '序号' , align : "center",type : "numbers",width:80}
                    , {field: 'userName', title: '用户名' , align : "center"}
                    , {field: 'operateInfo', title: '操作信息' , align : "center" }
                    , {field: 'operateDatetime', title: '操作时间' , align : "center" }
                ]
            ]
            , response: {
                statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0
            }

        });





        form.on('submit(search)',function (data) {
            //设置条件
            //重新加载
            getTable.reload({
                where : {
                    start : data.field.start,
                    end : data.field.end,
                    userCode : [[${userCode}]]
                }
                ,page : {
                    curr : 1
                }
            });
            return false;
        });


    });
</script>

</body>
</html>